/**
 * Created by Freeman on 2018/1/20.
 */
import React from 'react';
import {Alert, Image, Platform, ScrollView, Share, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import PropTypes from 'prop-types';
import {path} from 'ramda';
import ContentView from './ContentView';
import {COLOR} from '../../config/index';
import {Button} from "../base";
import NavigationItem from "../base/NavigationItem";
import AppLoading from "../base/AppLoading";

const showShareActionSheet = (navigation) => {
  const opts = {
    dialogTitle: navigation.state.params.title,
  }
  const content = {
    url: 'http://www.mifanxing.com/p/' + navigation.state.params.id,
    title: navigation.state.params.title,
    message: navigation.state.params.title,
  }
  if (Platform.OS === 'ios') {
    opts.subject = '发邮件需要用到的subject';
    opts.excludedActivityTypes = [
      'com.apple.UIKit.activity.PostToTwitter',
    ];
  }
  Share.share(content, opts).then(result => {
    if (result.action === Share.sharedAction) { // completed successCallback(completed, method)
      Alert.alert(`通过 ${result.activityType} 分享`);
    } else if (result.action === Share.dismissedAction) {
      Alert.alert('您没有分享');
    }
  })
}

class TopicProfile extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      headerTitle: navigation.state.params.title,
      headerStyle: {backgroundColor: 'white'},
      headerRight: (
        <NavigationItem
          icon={require('../../res/img/icon_navigation_item_share.png')}
          onPress={() => showShareActionSheet(navigation)}
        />
      ),
    };
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {actions, navigation} = this.props;
    actions.fetchTopic(navigation.state.params.id);
  }


  render() {
    const {topic, navigation} = this.props;
    if (!topic) {
      return <AppLoading/>;
    }
    const image = path(['images', '0', 'filename'], topic);
    return (
      <ScrollView style={styles.container}>
        <TouchableOpacity
          onPress={() =>
            navigation.navigate('Web', {
              uri: 'http://www.mifanxing.com/p/' + topic.id,
              title: path(['post', 'title'], topic)
            })
          }
        >
          <Text style={styles.item}>{path(['post', 'title'], topic)}</Text>
        </TouchableOpacity>
        <View style={styles.channelContainer}>
          <View style={styles.authorContainer}>
            <Image
              style={styles.authorImage}
              source={
                image
                  ? {uri: image}
                  : require('../../res/img/zqc-icon-middle.png')
              }
            />
            <Text style={styles.author}>{path(['from', 'source'], topic)}</Text>
          </View>
          <Button size="small" type="primary" onClick={() => {
          }}>关注</Button>
        </View>
        {path(['post', 'content'], topic) && (
          <ContentView content={path(['post', 'content'], topic)}/>
        )}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    backgroundColor: COLOR.backgroundLighter
  },
  item: {
    padding: 10,
    fontSize: 22,
    //height: 44,
    fontWeight: 'bold'
  },
  channelContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 10
  },
  authorContainer: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  authorImage: {
    width: 28,
    height: 28,
    borderRadius: 14
  },
  author: {
    fontSize: 14,
    marginLeft: 5
  },
  followButton: {
    fontSize: 14,
    color: '#fff',
    backgroundColor: '#f85959',
    paddingHorizontal: 20,
    paddingVertical: 10
  }
});

TopicProfile.propTypes = {
  topic: PropTypes.object,
  actions: PropTypes.object
};

export default TopicProfile;
